<template>
  <div class="view-action-configuration-wrapper" v-if="!hasFlow">
    <el-text truncated class="view-action-configuration-label">
      pc视图:
    </el-text>

    <el-select placeholder="请选择视图" v-model="obj.pcViewId"
               @change="pcViewChange" class="view-action-configuration-body">
      <el-option v-for="view in views" :label="view.viewName" :key="view.id" :value="view.id"/>
    </el-select>

    <el-text truncated class="view-action-configuration-label">
      pc操作:
    </el-text>

    <el-select placeholder="请选择pc操作" v-model="obj.pcViewActionId"
               @change="pcViewActionChange"
               class="view-action-configuration-body">
      <el-option v-for="action in pcActions" :label="action.actionName" :key="action.id"
                 :value="action.id"/>
    </el-select>

    <el-text truncated class="view-action-configuration-label">
      移动端视图:
    </el-text>

    <el-select placeholder="请选择视图" v-model="obj.mobileViewId"
               @change="mobileViewChange"
               class="view-action-configuration-body">
      <el-option v-for="view in views" :label="view.viewName" :key="view.id" :value="view.id"/>
    </el-select>

    <el-text truncated class="view-action-configuration-label">
      移动端操作:
    </el-text>

    <el-select placeholder="请选择移动端操作" v-model="obj.mobileViewActionId"
               @change="mobileViewActionChange"
               class="view-action-configuration-body">
      <el-option v-for="action in mobileActions" :label="action.actionName" :key="action.id"
                 :value="action.id"/>
    </el-select>
  </div>

  <div class="view-action-configuration-wrapper" v-else>
    <el-select v-model="obj.processDefinitionId"
               @change="processDefinitionChange" placeholder="请选择流程">
      <el-option v-for="flow in flows" :label="flow.name"
                 :key="flow.id" :value="flow.id"/>
    </el-select>
  </div>
</template>
<script setup>
import {computed, shallowRef, watch} from 'vue';
import {isEmpty} from '@/utils/CommonUtils';

const props = defineProps({
  views: {
    type: Array,
    default: () => []
  },
  viewActions: {
    type: Array,
    default: () => []
  },
  flows: {
    type: Array,
    default: () => [],
  },
  obj: {
    type: Object,
    default: () => ({}),
  }
});

watch(() => [props.views, props.viewActions, props.obj], () => {
  getPcViewActions();
  getMobileViewActions();
});

const pcActions = shallowRef([]);
const mobileActions = shallowRef([]);

function pcViewActionChange() {
  let viewActionId = props.obj.pcViewActionId;
  props.viewActions.forEach(action => {
    if (viewActionId === action.id) {
      props.obj.pcViewActionKey = action.actionKey;
    }
  });
}

function getPcViewActions() {
  let viewId = props.obj.pcViewId;
  pcActions.value = props.viewActions.filter(v => v.viewId === viewId);
  props.views.forEach(view => {
    if (props.obj.pcViewId === view.id) {
      props.obj.pcViewKey = view.viewKey;
    }
  });
}

function pcViewChange() {
  getPcViewActions();
  props.obj.pcViewActionId = undefined;
  props.obj.pcViewActionKey = undefined;
}

function mobileViewChange() {
  getMobileViewActions();
  props.obj.mobileViewActionId = undefined;
  props.obj.mobileViewActionKey = undefined;
}

function getMobileViewActions() {
  let viewId = props.obj.mobileViewId;
  mobileActions.value = props.viewActions.filter(v => v.viewId === viewId);
  props.views.forEach(view => {
    if (props.obj.mobileViewId === view.id) {
      props.obj.mobileViewKey = view.viewKey;
    }
  });
}

function mobileViewActionChange() {
  let viewActionId = props.obj.mobileViewActionId;
  props.viewActions.forEach(action => {
    if (viewActionId === action.id) {
      props.obj.mobileViewActionKey = action.actionKey;
    }
  });
}

function processDefinitionChange() {
  let flows = props.flows;
  if (isEmpty(flows)) return;
  flows.forEach(f => {
    if (f.id === props.obj.processDefinitionId) {
      props.obj.processKey = f.processKey;
    }
  });
}

function clear() {
  props.obj.pcViewId = undefined;
  props.obj.pcViewActionId = undefined;
  props.obj.mobileViewId = undefined;
  props.obj.mobileViewActionId = undefined;
  props.obj.processDefinitionId = undefined;
}

const hasFlow = computed(() => {
  if (isEmpty(props.flows)) return false;
  return true;
});

defineExpose({
  clear
});

</script>
<style>
.view-action-configuration-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
}

.view-action-configuration-label {
}

.view-action-configuration-body {
  padding: 0 10px;
}
</style>